<script lang="ts" setup>
import {getUserInfoAPI} from "@/api/UserAPI";
import type {ResponseInterface, UserInterface} from "@/type/models";
import {onMounted, reactive} from "vue";
import router from "@/router";
import {SwitchButton, User} from "@element-plus/icons-vue";

const TOKEN = localStorage.getItem("token") as string;
const USER = reactive<UserInterface>({})

//加载用户信息
async function getUserInfo() {
    const r: ResponseInterface = await getUserInfoAPI(TOKEN)
    Object.assign(USER, r.data)
    localStorage.setItem("user", JSON.stringify(USER))
}

function logout() {
    localStorage.clear();
    router.push("/login")
}

onMounted(async () => {
    await getUserInfo()
})
</script>

<template>
    <div>
        <el-container>
            <el-header class="header-nav">
                <el-row>
                    <el-col :offset="16" :span="2">
                        <!--占位-->
                    </el-col>
                    <el-col :span="2" class="header-nav-item">
                        <el-button link> {{ USER.nickname }}</el-button>
                    </el-col>
                    <el-col :span="2" class="header-nav-item">
                        <el-button link @click="router.push('/info')" :icon="User">个人信息</el-button>
                    </el-col>
                    <el-col :span="2" class="header-nav-item">
                        <el-button link @click="logout" :icon="SwitchButton">退出</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside>
                    <el-menu :router="true">
                        <el-menu-item index="note">
                            <template #title>
                                <span>备忘录</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="project">
                            <template #title>
                                <span>项目</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="ics">
                            <template #title>
                                <span>日历</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="IM">
                            <template #title>
                                <span>交流</span>
                            </template>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped>
.header-nav {
    height: 30px;
    border-bottom: #cccccc 1px solid;
}

.header-nav-item {
    text-align: center;
}
</style>